var canvas,
 context,
 canvasWidth = 490,
 canvasHeight = 220,
 images = {},
 frameInterval,
 fps = 30,
 drawing = false,
 fpsInterval,
 numFramesDrawn = 0,
 curFPS = 0,
 level = 1,
 maxLevel = 6,
 speed = 15,
 curLoadResNum = 0,
 totalLoadResources = 1,
 displayList = [],
 ball,
 hero,
 background;
 
 
 		var images = {}; 

		// Add in prepareCanvas Function 
		
		loadImage("zombie-leftArm");
		
		loadImage("zombie-legs");
		
		loadImage("zombie-torso"); 
		
		loadImage("zombie-rightArm");
		
		loadImage("zombie-head"); 
		
		loadImage("zombie-hair"); 
		
		//resource loaded
		var totalResources = 6; 
		
		var numResourcesLoaded = 0; 
		
		var fps = 30; 
		
		//redraw
		var charX = 245; 
		
		var charY = 185;
		
		var breathInc = 0.1;
		var breathDir = 1;
		var breathAmt = 0;
		var breathMax = 2;
		var breathInterval = setInterval(updateBreath, 1000 / fps);
		
		var maxEyeHeight = 14;
		var curEyeHeight = maxEyeHeight;
		var eyeOpenTime = 0;
		var timeBtwBlinks = 4;
		var blinkUpdateTime = 200;
		var blinkTimer = setInterval(updateBlink, blinkUpdateTime);

function loadImage(name) 

{ 

	images[name] = new Image(); 

	images[name].onload = function() 
	{ 
		resourceLoaded(); 
	} 

		images[name].src = "zombie/" + name + ".png"; 
}



function resourceLoaded() 															
{ 
															
	numResourcesLoaded += 1; 
															
	if(numResourcesLoaded === totalResources)
	{ 													
		setInterval(redraw, 1000 / fps); 														
	} 

} 



function redraw() 
{ 

	var x = charX; 
	
	var y = charY; 
	
	canvas.width = canvas.width; // clears the canvas 
	
	drawEllipse(x + 40, y + 29, 160 - breathAmt, 6); // Shadow
	context.drawImage(images["zombie-leftArm"], x + 40, y - 42 - breathAmt);
	context.drawImage(images["zombie-legs"], x, y);
	context.drawImage(images["zombie-torso"], x, y - 50);
	context.drawImage(images["zombie-head"], x - 10, y - 125 - breathAmt);
	context.drawImage(images["zombie-hair"], x - 37, y - 138 - breathAmt);
	context.drawImage(images["zombie-rightArm"], x - 15, y - 42 - breathAmt);
	
	drawEllipse(x + 47, y - 68 - breathAmt, 8, curEyeHeight);
	drawEllipse(x + 58, y - 68 - breathAmt, 8, curEyeHeight);
}



						function drawEllipse(centerX, centerY, width, height) 
						{
							context.beginPath();
							
							context.moveTo(centerX, centerY - height/2);
							context.bezierCurveTo(
							centerX + width/2, centerY - height/2,
							centerX + width/2, centerY + height/2,
							centerX, centerY + height/2
							);
							context.bezierCurveTo(
							centerX - width/2,
							centerY + height/2,
							centerX - width/2,
							centerY - height/2, centerX, centerY - height/2
							);
							context.fillStyle = "black";
							context.fill(); context.closePath();
						}

function updateBreath() 
{
			if (breathDir === 1) 
			{ // breath in
				breathAmt -= breathInc;
				if (breathAmt < -breathMax) 
				{
					breathDir = -1;
				}
			} 
else 
{ // breath out
	breathAmt += breathInc;
			if(breathAmt > breathMax) 
			{
				breathDir = 1;
			}
}

}


function updateBlink() 
			{
				eyeOpenTime += blinkUpdateTime;
						if(eyeOpenTime >= timeBtwBlinks)
						{
							blink();
						}
			}
			

function blink() 
{
	curEyeHeight -= 1;
		if (curEyeHeight <= 0) 
		{
			eyeOpenTime = 0; curEyeHeight = maxEyeHeight;
		} 
			else 
			{
			setTimeout(blink, 10);
			}
}


	Ball = function() 
    {
 
 		var x = 0,
 		y = 0,
 		speed = 0, 
 		direction = 1, 
 		rollTimer, 
 		dirty = false, 
 		diameter = Math.random() * 200, 
 		color = "#DD3333",
 		highlightColor = "#fa6565";
 
 		rollTimer = setInterval(updateRoll, 1000/25);
 
 
 
 					function roll(pSpeed, pDirection)
 					{
 						speed = pSpeed;
 						if(pDirection)
 						{
 							direction = pDirection;
						}
 	
 					}
 					
 					
 					
 							function stop() 
 							{
 								speed = 0;
 							}
 							
 							
 							function updateRoll()
 							{
 								x += direction * speed;
 							}
 								
 								
 								function draw(context) 
 								{
 
 									var centerX = x,
 									centerY = y + (diameter + 10)/2 - 2,
 									width = (diameter + 30),
 									height = 6;
 
 									context.beginPath();
 									context.moveTo(centerX, centerY);
									context.bezierCurveTo(centerX-width/2,centerY-height/2,
									centerX-width/2,centerY+height/2,
								    centerX,centerY+height/2);
									context.bezierCurveTo(centerX+width/2,centerY+height/2,
									centerX+width/2,centerY-height/2,
									centerX,centerY-height/2);
									context.fillStyle = "#000000";
									context.fill();
									context.closePath();
									 
									 context.beginPath();
									 context.moveTo(x, y - (diameter + 10)/2);
									 context.arc(x,y,(diameter + 10)/2,0,2*Math.PI,false);
									 context.fillStyle = "#000000";
									 context.fill();
									 context.closePath();
									 
									 context.beginPath();
									 context.moveTo(x, y - diameter/2);
									 context.arc(x,y,diameter/2,0,2*Math.PI,false);
									 context.fillStyle = color;
									 context.fill();
									 context.closePath();
									 
									 centerX = x + 3;
									 centerY = y - 3;
									 context.beginPath();
									 context.moveTo(centerX, centerY);
									 context.arc(centerX,centerY,diameter/3/2,0,2*Math.PI,false);
									 context.fillStyle = highlightColor;
									 context.fill();
									 context.closePath();
 								}
 								
 								
 								
 								
 								
 								
 								
							 function getX()
							 {
							 	return x; 
							 }
 								function setX(pX)
 								{
 									x = pX; 
 								}
 								
									 function getY()
									 {
									 	return y; 
									 }
												 function setY(pY)
												 {
												 	y = pY; 
												 }
												 
 				return 
 				{
 					getX:getX,
 					setX:setX,
 					getY:getY,
 					setY:setY,
 					roll:roll,
 					draw:draw,
 					stop:stop
 				};
 				
 };
 
												function throwBall() 
												{ 
												 	ball.roll(speed, -1);
												}



function start() 
{
 frameInterval = setInterval(update, 1000/fps);
 fpsInterval = setInterval(updateFPS, 1000);
}


				function prepareCanvas(gameDiv, pCanvasWidth, pCanvasHeight) 
				{
 
	 				canvasWidth = pCanvasWidth;
	 				canvasHeight = pCanvasHeight;
	 
					 // Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)
					 canvas = document.createElement('canvas');
					 canvas.setAttribute('width', canvasWidth);
					 canvas.setAttribute('height', canvasHeight);
					 canvas.setAttribute('id', 'canvas');
					 gameDiv.appendChild(canvas);
	 
					 /*if(typeof G_vmlCanvasManager != 'undefined') {
					 canvas = G_vmlCanvasManager.initElement(canvas);
					 }*/
					 context = canvas.getContext("2d"); // Grab the 2d canvas context
					 // Note: The above code is a workaround for IE 8 and lower. Otherwise we could have used:
					 //     context = document.getElementById('canvas').getContext("2d");
	
					 start();
					
					 ball = new Ball();
					 ball.setX(canvasWidth);
					 ball.setY(200);
					 ball.roll(speed, -1);
					 displayList.push(ball);
				}



									function clearCanvas() 
									{
										 canvas.width = canvas.width; // clears the canvas 
									}

function update() 
{
 
 	++numFramesDrawn;

	  if(ball.getX() < 0) 
	  {
		 speed = Math.floor(Math.random() * 5);
		 level += 1;
		
		 ball.stop();
		 ball.setX(canvasWidth + 20);
		 setTimeout(throwBall, Math.random() * 3000);
 	  } 
 	  
			 else 
			 {
			 	ball.roll(speed, -1);
			 }
			 
 				redraw(); 
}




										function redraw() 
										{
										 
										 var i;
										 
										 clearCanvas();
										 
												 for(i = 0; i < displayList.length; i++)
												 {
												 	displayList[i].draw(context); 
												 }
										 
																							 try {
																							 
																							 } 
																							 catch (ex) 
																							 {
																							 
																							 }
										 
										}


function updateFPS()
{
 	curFPS = numFramesDrawn;
 	numFramesDrawn = 0;
}